<template>
	<div id="basicInformation">
		<el-row>
			<el-col :span="4" class="backgroundTitelBox">
				{{ agentData.commissionModel === 2 ? '返佣信息' : '返点信息' }}
			</el-col>
			<el-col :span="2" class="refrestBox">
				<el-button
					type="primary"
					icon="el-icon-refresh"
					@click="refresh"
				>
					{{ $t('common.refresh') }}
				</el-button>
			</el-col>
			<el-col
				:span="1"
				class="editMsg"
				v-if="
					agentData.proxyLevel === 0 &&
						agentData.commissionModel === 2
				"
			>
				<a @click="isEdit = true" v-if="hasPermission('90210042')">
					<i class="el-icon-edit-outline"></i>
					<br />
					{{ $t('agent.edit_info') }}
				</a>
			</el-col>
		</el-row>
		<div style="margin-top: 10px;" class="point-table">
			<PointAndRebate
				:isTotalAgent="agentData.proxyLevel === 0"
				ref="PointAndRebateForm"
				:isEdit="isEdit"
				:isAgentEdit="isAgentEdit"
				:isMemberEdit="isMemberEdit"
				:merchantId="agentData.merchantId"
				:data="pointAndRebate"
			/>
			<template
				v-if="
					agentData.commissionModel === 1 &&
						agentData.proxyLevel === =
				"
			>
				<div class="AgentEditBtn editMsg" v-if="!isMemberEdit">
					<template v-if="!isAgentEdit">
						<a
							@click="isAgentEdit = !isAgentEdit"
							v-if="hasPermission('90210042')"
						>
							<i class="el-icon-edit-outline"></i>
							<p>{{ $t('agent.edit_info') }}</p>
						</a>
					</template>
					<div v-else>
						<el-button
							type="primary"
							:disabled="loading"
							@click="submitForm(0)"
							:loading="loading"
						>
							{{ $t('common.submit') }}
						</el-button>
						<el-button @click="refresh(0)">
							取消
						</el-button>
					</div>
				</div>
				<div class="MemberEditBtn editMsg" v-if="!isAgentEdit">
					<template v-if="!isMemberEdit">
						<a
							@click="isMemberEdit = true"
							v-if="hasPermission('90210042')"
						>
							<i class="el-icon-edit-outline"></i>
							<p>{{ $t('agent.edit_info') }}</p>
						</a>
					</template>
					<div v-else>
						<el-button
							type="primary"
							:disabled="loading"
							@click="submitForm(1)"
							:loading="loading"
						>
							{{ $t('common.submit') }}
						</el-button>
						<el-button @click="refresh(1)">
							取消
						</el-button>
					</div>
				</div>
			</template>
		</div>
		<div v-if="isEdit" style="margin-left: 200px ;">
			<el-button
				type="primary"
				:disabled="loading"
				@click="submitForm()"
				:loading="loading"
			>
				{{ $t('common.submit') }}
			</el-button>
			<el-button @click="refresh">
				取消
			</el-button>
		</div>
		<el-dialog
			:visible.sync="dialogVisible"
			width="350px"
			title="修改返点信息"
		>
			<p>
				确认修改返点信息后，修改前代理团队返点比例将生成已失效记录。未自定义设置过平台发放返水比例的会员将同步更新。您可勾选并同步更新所有代理条线会员的平台发放返水比例。
			</p>
			<div style="margin-top:25px">
				<el-checkbox v-model="isAllSub">
					同步更新所有会员平台发放返点比例
				</el-checkbox>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleDialogClose">取 消</el-button>
				<el-button
					type="primary"
					@click="fetchUpdate(1)"
					:loading="loading"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>

		<AgentPointSetAllSub
			:loading="loading"
			:visible="agentPointSetAllSubVisible"
			:agentPoint="agentPoint"
			:agentData="agentData"
			@ok="(data) => fetchUpdate(0, data)"
			@close="agentPointSetAllSubVisible = false"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import dayjs from 'dayjs'
import PointAndRebate from '@/components/PointAndRebate'
import AgentPointSetAllSub from '@/components/AgentPointSetAllSub'
import { rebateKeys } from '@/components/PointAndRebate/utils.js'

export default {
	components: {
		PointAndRebate,
		AgentPointSetAllSub
	},
	mixins: [list],
	props: {
		agentData: {
			type: Object,
			default: () => ({})
		},
		outlineInfo: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			loading: false,
			isEdit: false,
			isAgentEdit: false,
			isMemberEdit: false,
			isAllSub: false,
			// rebateRateData: {},
			commissionRateList: [],
			rebateRateList: [],
			dialogVisible: false,
			agentPoint: {},
			agentPointSetAllSubVisible: false
		}
	},
	computed: {
		pointAndRebate() {
			return {
				commissionModel: this.agentData.commissionModel,
				commissionRateList: this.commissionRateList,
				rebateRateList: this.rebateRateList,
				rebateAllotMode: this.agentData.rebateAllotMode,
				rebateRateTemplateId: this.agentData.rebateRateTemplateId,
				rebateRateTemplateName: this.agentData.rebateRateTemplateName,
				merchantId: this.agentData.merchantId
			}
		}
	},
	watch: {
		agentData: {
			handler() {
				this.refresh()
			},
			deep: true,
			immediate: true
		}
	},
	created() {
		this.refresh()
	},
	methods: {
		handleDialogClose(type) {
			this.isAllSub = false
			this.isEdit = false

			// 团队返点
			if (type === 0) {
				this.agentPointSetAllSubVisible = false
				this.isAgentEdit = false
			} else {
				this.dialogVisible = false
				this.isMemberEdit = false
			}
		},
		async fetchUpdate(type, params) {
			try {
				this.loading = true
				const {
					commissionRateList,
					commissionModel,
					...vals
				} = this.$refs['PointAndRebateForm'].getValues()
				await this.fetchPoint(type, {
					...vals,
					...(params || {})
				})
				if (commissionModel === 2) {
					await this.$api.commissionRateUpdate({
						commissionRateList,
						merchantId: this.agentData.merchantId,
						userId: this.agentData.id
					})
				}
				this.handleDialogClose(type)
			} catch (err) {
				throw err
			} finally {
				this.loading = false
			}
		},
		// type:0 团队返点比例
		// type:1 默认会员返水比例(平台发放)
		async submitForm(type) {
			try {
				await this.$refs['PointAndRebateForm'].validate()
				if (this.agentData.commissionModel === 1) {
					const { rebateRateList, rebateAllotMode } = this.$refs[
						'PointAndRebateForm'
					].getValues()
					if (type === 0) {
						this.agentPoint = rebateRateList.find((item) => {
							return item.platformFlag === 0
						})
						// 判断团队返点是否都为空
						if (rebateAllotMode === 1) {
							let isAllNull = true
							rebateKeys.forEach((k) => {
								if (this.agentPoint[k] > 0) {
									isAllNull = false
								}
							})
							if (isAllNull) {
								this.$message.error(
									'全部场馆项目不能全为0，至少1个场馆值>0'
								)
								return
							}
							this.agentPointSetAllSubVisible = true
						} else {
							await this.fetchUpdate(type)
						}
					} else {
						this.dialogVisible = true
					}
				} else {
					await this.fetchUpdate()
					await this.refresh()
				}
			} catch (err) {
				throw err
			}
		},
		// 提交返点
		// type: 0 团队返点比例
		// type: 1 默认会员返水比例(平台发放)
		async fetchPoint(type, val) {
			if (this.agentData.commissionModel === 1) {
				val.rebateRateList[1]['userType'] = 2
			}
			let rebateRateList = val.rebateRateList
			// 返点
			if (this.agentData.commissionModel === 1) {
				rebateRateList = [val.rebateRateList[parseInt(type)]]
			}

			// 返佣
			if (this.agentData.commissionModel === 2) {
				rebateRateList = [val.rebateRateList[0]]
			}

			const params = Object.assign({}, val, {
				isAllSub: this.isAllSub,
				allSub: this.isAllSub,
				parentProxyId: this.agentData.id,
				commissionModel: this.agentData.commissionModel,
				rebateRateList
			})
			let res = {}
			// 模板分配
			if (params.rebateAllotMode === 2 && params.commissionModel === 1) {
				res = await this.$api.updateRebateAllotMode({
					level: 1,
					rebateAllotMode: params.rebateAllotMode,
					templateId: params.rebateRateTemplateId,
					sourceTemplateId: this.agentData.rebateRateTemplateId,
					topProxyId: params.parentProxyId,
					userId: params.parentProxyId,
					adjustmentType: this.adjustmentType,
					userType: 1
				})
			} else {
				res = await this.$api.rebateRateUdate(params)
			}
			if (res.code === 200) {
				this.agentData.rebateAllotMode = params.rebateAllotMode
				this.agentData.rebateRateTemplateId =
					params.rebateRateTemplateId
				this.agentData.rebateRateTemplateName =
					params.rebateRateTemplateName
				this.$message.success(this.$t('common.save_success'))
			}
		},
		refresh(type) {
			if (type === 0) {
				this.isAgentEdit = false
				this.queryInfo()
			} else if (type === 1) {
				this.isMemberEdit = false
				this.queryInfo()
			} else {
				this.isEdit = false
				this.isAllSub = false
				this.dialogVisible = false
				this.queryInfo()
				this.queyrCommissionRate()
			}
		},
		goPoint() {
			this.$router.push({
				path: `/agent/agentManage/agentPoint`,
				query: this.pointInfo
			})
		},
		async queryInfo() {
			try {
				const params = {
					// userType: this.agentData.commissionModel === 2 ? 0 : 1,
					merchantId: this.agentData.merchantId,
					userName: this.agentData.userName
					// status: 1
				}

				if (this.agentData.commissionModel === 2) {
					params['userType'] = 2
				}

				const res = await this.$api.rebateRateQuery(params)
				if (res.code === 200 && res.data && res.data.length > 0) {
					// 返佣
					if (this.agentData.commissionModel === 2) {
						this.rebateRateList = [
							{
								platformFlag: 0
							},
							res.data.find((item) => {
								return (
									item.userType === params.userType &&
									item.status === params.status
								)
							})
						]
						return
					}
					// 代理
					const platformFlag_0 =
						res.data.find((item) => {
							return (
								item.platformFlag === 0 &&
								item.userType === 1 &&
								item.status === 1
							)
						}) ||
						res.data.find((item) => {
							return (
								item.platformFlag === 0 &&
								item.userType === 1 &&
								item.status === 0
							)
						}) ||
						{}

					// 平台
					const platformFlag_1 =
						res.data.find((item) => {
							return (
								item.platformFlag === 1 &&
								item.userType === 2 &&
								item.status === 1
							)
						}) ||
						res.data.find((item) => {
							return (
								item.platformFlag === 1 &&
								item.userType === 2 &&
								item.status === 0
							)
						}) ||
						{}
					this.rebateRateList = [platformFlag_0, platformFlag_1]
				}
			} catch (err) {
				throw err
			} finally {
				this.activeL = false
			}
		},
		async queyrCommissionRate() {
			try {
				const res = await this.$api.commissionRateQuery({
					status: 1,
					merchantId: this.agentData.merchantId,
					userName: this.agentData.userName
				})
				if (res.code === 200) {
					this.commissionRateList = res.data
				}
			} catch (err) {
				throw err
			}
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	padding-top: 10px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
	background-color: #fff !important;
}

.editMsg {
	text-align: center;
	line-height: 18px;
	i {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}
}

.titelBox {
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	position: relative;
}
.backgroundTitelBox {
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.refrestBox {
	text-align: center;
	display: flex;
	margin-left: 10px;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}

.review-content {
	display: flex;
	margin-top: 20px;
}

.review-content span {
	min-width: 120px;
}

.point-table {
	display: inline-block;
	position: relative;
	min-height: 600px;
	.editMsg {
		position: absolute;
		top: 182px;
		left: 1100px;
		> a {
			display: block;
			width: 30px;
		}
		> div {
			width: 155px;
		}
	}
	.MemberEditBtn {
		top: 310px;
	}
}
</style>
